<template>
	<view class="main">
		<view class="box">
			<view class="logo">
				<image class="" src="/static/img/logo2.png" mode="widthFix"></image>
				<view class="title">
					<text style="color: #32c9ca;">
						急救调度中心
					</text>
				</view>
			</view>
			<view class="form">
				<up-form labelPosition="left" :model="userInfo" :rules="rules" ref="form1">
					<up-form-item prop="username">
						<up-input v-model="userInfo.username" class="border-radius" placeholder="请输入账号">
							<template #prefix>
								<up-icon name="account-fill" size="20"></up-icon>
							</template>
						</up-input>
					</up-form-item>
					<up-form-item prop="password">
						<up-input class="border-radius" v-model="userInfo.password" type="password" placeholder="请输入密码">
							<template #prefix>
								<up-icon name="lock-fill" size="20"></up-icon>
							</template>
							<template #suffix>
								<up-icon name="eye-off" size="20"></up-icon>
							</template>
						</up-input>
					</up-form-item>
				</up-form>
				<view class="checkbox">
					<up-checkbox-group :usedAlone="true" v-model="checkboxValue1" placement="column"
						@change="checkboxChange">
						<up-checkbox activeColor="#32c9ca" label="记住密码"></up-checkbox>
					</up-checkbox-group>
				</view>

				<up-button class="submitBtn" shape="circle" @click="loginOut" color="#32c9ca">提交</up-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		toRefs
	} from 'vue';
	import {
		login,getUserInfo
	} from '@/api/index.js';
	// 使用 reactive 创建响应式状态  
	const state = reactive({
		showSex: false,

		userInfo: {
			hospitalId: 102,
			password: '',
			username: '',
		},

		checkboxValue1: false,

	});
	const rules = {
		username: {
			type: 'string',
			required: true,
			message: '请输入账号',
			trigger: ['blur'],
		},
		password: {
			type: 'string',
			required: true,
			message: '请输入密码',
			trigger: ['blur'],
		},
	}
	const form1 = ref(null)
	let {
		userInfo
	} = toRefs(state)
	// 登录方法
	const loginOut = () => {
		form1.value.validate().then(result => {
			if (result) {
				login(userInfo.value).then(res => {
					uni.setStorageSync('token', res.token) // 保存token到本地
					getUser(res.token)
				}).catch(err => {
					uni.clearStorageSync()
					console.log(err)
				})
			}
		})
	}
	// 获取用户信息
	const getUser = (token) => {
		let data = {
			hospitalId:102
		}
		getUserInfo(data).then(res=>{
			uni.setStorageSync('userInfo', res.user) // 保存用户信息到本地
			uni.switchTab({
				url: '/pages/home/home'
			})
		}).catch(err=>{
			uni.clearStorageSync()
			console.log(err)
		})
	}
</script>

<style scoped lang="scss">
	.main {
		height: 85vh;
		display: flex;
		justify-content: center;
		align-items: center;

		.box {
			.logo {
				text-align: center;
				height: 100rpx;
				color: '#32c9ca';

				image {
					width: 200rpx;
				}

				.title {
					font-weight: bold;
					font-size: 44rpx;
				}
			}

			.form {
				margin-top: 200rpx;
			}
		}

	}

	.border-radius {
		width: 540rpx;
		border-radius: 50rpx;
	}

	.submitBtn {
		margin-top: 20rpx;
	}

	.checkbox {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>